<template>
	<!-- 订单完成、取消、退款，不保留底部距离 -->
	<view class="container" :class="{'btn-placeholder':checkBtnPlaceholder()}">
		<TopNav title="详情" :bg-color="topBGC"></TopNav>
		<view class="relative">
			<view class="absolute text-white m-t10 p-l16 p-r12 flex align-center justify-between" style="z-index:99"
				v-if="detailData.order_status !==  7">
				<text class="f-w600 line-height24 f-s17" v-if="detailData.order_status===1">请及时确认订单</text>
				<text class="f-w600 line-height24 f-s17" v-else>{{currentStep.text}}</text>
				<view class="flex align-center" @click="handleOpenPopup">
					<text class="f-s14 line-height20 m-r2">订单状态记录</text>
					<image src="/static/images/order/more-1.png" class="width-16 height-16" mode=""></image>
				</view>
			</view>
			<view class="absolute text-white m-t10 p-l16 p-r12 flex align-center justify-between" style="z-index:99"
				v-else>
				<text class="f-w600 line-height24 f-s17">退款订单</text>
			</view>
			<image src="/static/images/order/top.png" class="full-width height-72" mode=""></image>
		</view>
		<view class="bg-white radius flex justify-between relative" style="padding: 26rpx 32rpx;margin-top: -56rpx;">
			<view class="text-center" v-for="(item,index) in stepList" :key="index">
				<image
					:src="item.value<=(isNaN(currentStep['value'])? -1:currentStep['value'])?item.activeIcon:item.icon"
					class="width-32 height-32" mode=""></image>
				<text class="m-t6 line-height-16 f-w400 block"
					style="color: #404040;font-size: 22rpx;">{{item.step}}</text>
			</view>
		</view>
		<view class="bg-white radius m-t10 p-12">
			<view class="">
				<text class="f-w600 f-s15 line-height24">服务客户</text>
			</view>
			<view class="m-t10 flex justify-between align-center">
				<view class="flex align-center">
					<image :src="detailData.avatar || '/static/logo.png'" class="bg-gray round width-28 height-28 m-r10"
						mode=""></image>
					<text class="m-r8 f-s14 line-height20">{{detailData.username}}</text>
					<image src="/static/images/order/vip.png" v-if="detailData.is_vip == 1" class="width-23 height-16"
						mode="" @click="$toast('VIP客户')"></image>
				</view>
				<view class="flex align-center"
					style="border-radius: 28rpx;border: 1rpx solid #DDE0E6;padding: 12rpx 16rpx 12rpx 12rpx;"
					hover-class="pressed" @click="handleMakePhone" v-if="detailData.order_status !==  7">
					<!-- 退款订单，不允许联系客户 -->
					<image src="/static/images/order/phone.png" class="width-16 height-16 r-r2" mode=""></image>
					<text class="f-s12">联系他</text>
				</view>
			</view>
		</view>
		<view class="bg-white radius m-t10 p-12">
			<view class="">
				<text class="f-w600 f-s15 line-height24">服务项目</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t14">
				<text class="text-grey self-start shrink-0">项目名称</text>
				<text class="p-l18">{{detailData.service_name}}</text>
			</view>
			<!-- 	<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">项目标签</text>
				<text class="p-l18">{{detailData.remark}}</text>
			</view> -->
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">项目价格</text>
				<text class="p-l18">￥{{detailData.service_data?detailData.service_data.service_all_price : '-'}}</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">服务时长</text>
				<text
					class="p-l18">{{detailData.service_data?detailData.service_data.service_duration_hour : '-'}}小时</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">收益分成</text>
				<text class="p-l18">{{detailData.technician_rate}}%</text>
			</view>
		</view>
		<view class="bg-white radius m-t10 p-12" v-if="detailData.clock_order && detailData.clock_order.length">
			<view class="">
				<text class="f-w600 f-s15 line-height24">加时项目</text>
			</view>
			<view class="" v-for="(clockItem,clockIndex) in detailData.clock_order" :key="clockItem.id">
				<view class="flex justify-between line-height20 f-s14 f-w400 m-t14">
					<text class="text-grey self-start shrink-0">项目名称</text>
					<text class="p-l18">{{clockItem.service_data.name}}</text>
				</view>
				<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
					<text class="text-grey self-start shrink-0">项目价格</text>
					<text class="p-l18">￥{{clockItem.service_data.price}}</text>
				</view>
				<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
					<text class="text-grey self-start shrink-0">服务时长</text>
					<text class="p-l18">{{clockItem.service_data.duration}}小时</text>
				</view>
				<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
					<text class="text-grey self-start shrink-0">收益分成</text>
					<text class="p-l18">{{clockItem.technician_rate}}%</text>
				</view>
				<view class="line m-t10 m-b10">

				</view>

			</view>
			<view class="m-t12 text-right">
				<text class="text-gray f-s14 line-height20 f-w400 p-r6">总加时</text>
				<text class="text-theme f-w600 f-s14 line-height18">{{detailData.clock_num || 0}}小时</text>
			</view>
		</view>
		<view class="bg-white radius m-t10 p-12">
			<view class="">
				<text class="f-w600 f-s15 line-height24">预约信息</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t14">
				<text class="text-grey self-start shrink-0">预约到达时间</text>
				<text class="p-l18">{{detailData.appointment_time}}</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">出行方式</text>
				<text class="p-l18">{{detailData.travel_type_name}}</text>
			</view>
			
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">服务地址</text>
				<view class="flex justify-between text-right p-l18">
					<view class="copy shrink-0 m-t2" hover-class="pressed"
						@click.stop="handleCopy(`${detailData.province || ''}${detailData.city || ''}${detailData.district || ''}${detailData.address || '-'}`)">
						复制</view>
					<view class="flex align-center" @click="handleOpenMapApp">
						<text
							class="p-r4">{{`${detailData.province || ''}${detailData.city || ''}${detailData.district || ''}${detailData.address || '-'}`}}</text>
						<image src="/static/images/order/more.png" class="width-16 height-16 shrink-0 m-t2" mode="">
						</image>
					</view>

				</view>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">订单备注</text>
				<text class="p-l18 text-right">{{detailData.remark || '-'}}</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">订单编号</text>
				<view class="flex justify-between text-right p-l18">
					<view class="copy shrink-0 m-t2" hover-class="pressed" @click="handleCopy(detailData.order_sn)">复制
					</view>
					<text>{{detailData.order_sn}}</text>
				</view>
			</view>
			
		</view>
		<view class="bg-white radius m-t10 p-12">
			<view class="">
				<text class="f-w600 f-s15 line-height24">费用详情</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">订单金额</text>
				<text class="">￥{{detailData.total_money || 0}}</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">出行费用</text>
				<text class="p-l18">￥{{detailData.all_fare || 0}}</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">优惠金额</text>
				<text class="">￥{{detailData.discount || 0}}</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">订单实付</text>
				<text class="f-w600 text-theme">￥{{detailData.pay_money || 0}}</text>
			</view>
			</view>
		<view class="bg-white radius m-t10 p-12">
			<view class="">
				<text class="f-w600 f-s15 line-height24">收益计算</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12"
				v-for="reward in detailData.all_income_arr" :key="reward.title">
				<text class="text-grey self-start shrink-0">{{reward.title}}</text>
				<text class="f-w600">{{reward.value || 0}}</text>
			</view>
			<!-- <view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">保障扣款</text>
				<text class="f-w600">￥{{detailData.ensure_reduce_money || 0}}</text>
			</view> -->
			<!-- <view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">车费收益</text>
				<text class="f-w600">￥{{detailData.all_fare || 0}}</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">打赏收益</text>
				<text class="f-w600">￥{{detailData.reward_money || 0}}</text>
			</view>
			<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
				<text class="text-grey self-start shrink-0">项目费用</text>
				<text class="f-w600">￥{{detailData.reduce_money || 0}}</text>
			</view> -->
			<!-- <view class="p-tb8 p-lr10 radius-6 m-t10 line-height20 f-s11 f-w400" style="background-color: #F0F1F2;"
				v-if="deductionFee && deductionFee.length">
			
				<text>{{deductionFee.join('，')}}</text>
			</view> -->
			<view class="p-tb8 p-lr10 radius-6 m-t10 line-height20 f-s11 f-w400" style="background-color: #F0F1F2;"
				v-if="detailData.reduce_desc">

				<text>{{detailData.reduce_desc}}</text>
			</view>
			<view class="line m-t12"></view>
			<view class="m-t12 text-right">
				<text class="text-gray f-s14 line-height20 f-w400 p-r6">总收益</text>
				<text class="text-theme f-w600 f-s14 line-height18">￥{{detailData.all_income || '-'}}</text>
			</view>

		</view>
		<view class="radius bg-white m-t10 p-12" v-if="detailData.report === 1">
			<view class="">
				<text class="f-w600 f-s15 line-height22">报备详情</text>
			</view>
			<view class="" v-for="(item,index) in reportList" :key="item.id">

				<view class="flex justify-between line-height22 f-s15 f-w400 m-t16">
					<text class="text-grey self-start shrink-0">报备类型</text>
					<text class="p-l48">{{item.types_name}}</text>
				</view>
				<view class="flex justify-between line-height22 f-s15 f-w400 m-t16">
					<text class="text-grey self-start shrink-0">报备描述</text>
					<text class="p-l48">{{item.content}}</text>
				</view>
				<view class="flex justify-between line-height22 f-s15 f-w400 m-t16">
					<text class="text-grey self-start shrink-0">报备时间</text>
					<text class="p-l48">{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM')}}</text>
				</view>
				<view class="flex justify-between line-height22 f-s15 f-w400 m-t16">
					<text class="text-grey self-start shrink-0">证明材料</text>
					<view class="overflow-hidden p-l48">
						<view class="image-file-container">
							<image :src="image" class="bg-gray image-file" mode=""
								v-for="(image,imageIndex) in item.images" :key="image"
								@click="handlePreviewImage(item.images,imageIndex)"></image>
						</view>

					</view>
				</view>
				<view class="line m-t14" v-if="index<reportList.length-1">

				</view>
			</view>


		</view>
		<view class="bg-white radius m-t10 p-12" v-if="detailData.comment_user_data">
			<view class="">
				<text class="f-w600 f-s15 line-height24">我对客户的评价</text>
			</view>
			<view class="flex justify-between align-center m-t10">
				<view class="flex align-center">
					<image :src="detailData.avatar" class="width-28 height-28 round bg-gray" mode=""></image>
					<text class="f-w600 line-height20 f-s12 p-l8">{{detailData.username}}</text>
				</view>
				<text
					class="text-gray f-s12 f-w400 line-height17">{{ $u.timeFormat(detailData.comment_user_data.create_time, 'yyyy-mm-dd hh:MM')}}</text>
			</view>
			<view class="eva-tag">
				<view class="eva-tag-item" v-for="item in detailData.comment_user_data.behavior_data" :key="item.name">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="">
				<text class="f-s14 f-w400 line-height22">{{detailData.comment_user_data.technician_content}}</text>
			</view>
		</view>
		<view class="bg-white radius m-t10 p-12" v-if="detailData.comment_data">
			<view class="">
				<text class="f-w600 f-s15 line-height24">来自客户的评价</text>
			</view>
			<view class="flex justify-between align-center m-t10">
				<view class="flex align-start">
					<image :src="detailData.avatar" class="width-28 height-28 round bg-gray" mode=""></image>
					<view class="p-l8">
						<text class="f-w600 line-height20 f-s12">{{detailData.username}}</text>
						<view class="flex m-t3 align-center">
							<image src="/static/images/order/star.png" class="width-16 height-16" mode=""
								v-for="item of detailData.comment_data.service_score" :key="item"></image>
							<text class="text-grey f-s12 f-w600 p-l2">{{detailData.comment_data.service_score}}</text>
						</view>
					</view>
				</view>
				<text
					class="text-gray f-s12 f-w400 line-height17">{{ $u.timeFormat(detailData.comment_data.create_time, 'yyyy-mm-dd hh:MM')}}</text>
			</view>
			<view class="eva-tag">
				<view class="eva-tag-item" v-for="item in detailData.comment_data.types_data" :key="item.name">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="">
				<text class="f-s14 f-w400 line-height22">{{detailData.comment_data.content}}</text>
			</view>
		</view>
		<view class="flex justify-center fixed-bottom" v-if="detailData.order_status === 1">
			<view class="self-btn flex flex-direction" hover-class="pressed" @click="handleTakeOrder">
				<text class="f-s16 line-height22">立即接单</text>
			</view>
		</view>
		<view class="flex justify-center fixed-bottom" v-if="currentStep['value'] === 0">
			<view class="self-btn m-r10" style="background-color:#DDE0E6;width: 194rpx;" hover-class="pressed"
				@click="handleToPath('inform')">
				<text class="text-black f-w500 f-s16">报备</text>
			</view>
			<view class="self-btn flex flex-direction" hover-class="pressed" style="width: 488rpx;"
				@click="handleSetOut(1)">
				<text class="f-s16 line-height22">我已出发</text>
			</view>
		</view>
		<view class="flex justify-center fixed-bottom" v-if="currentStep['value'] === 1">
			<view class="self-btn m-r10" style="background-color:#DDE0E6;width: 194rpx;" hover-class="pressed"
				@click="handleToPath('inform')">
				<text class="text-black f-w500 f-s16">报备</text>
			</view>
			<view class="self-btn flex flex-direction" hover-class="pressed" style="width: 488rpx;"
				@click="handleGetTo">
				<text class="f-s16 line-height22">我已到达，拍照打卡</text>
			</view>
		</view>
		<view class="flex justify-center fixed-bottom" v-if="currentStep['value'] === 3">
			<view class="self-btn m-r10" hover-class="pressed" style="background-color:#DDE0E6;width: 194rpx;"
				@click="handleToPath('inform')">
				<text class="text-black f-w500 f-s16">报备</text>
			</view>
			<view class="self-btn flex flex-direction" hover-class="pressed" style="width: 488rpx;"
				@click="handleEndService">
				<text class="f-s16 line-height22">拍照完成服务</text>
			</view>
		</view>
		<view class="flex justify-center fixed-bottom"
			v-if="currentStep['value'] === 4 && !detailData.comment_user_data">
			<view class="self-btn flex-direction m-r10" style="background-color:#DDE0E6;width: 194rpx;"
				@click="handleToInformoDetail(detailData.report)" hover-class="pressed">
				<text class="text-black f-w500 f-s16 line-height22">{{detailData.report?'已报备':'无报备'}}</text>
				<!-- <text class="text-gray f-s12 line-height17">沟通晚到</text> -->
			</view>
			<view class="self-btn flex flex-direction" hover-class="pressed" style="width: 488rpx;"
				@click="handleToEvaluate">
				<text class="f-s16 line-height22">评价客户</text>
			</view>
		</view>
		<!-- 出发-服务阶段显示 -->
		<l-drag v-if="currentStep['value']>0 && currentStep['value']<4" ref="lDrag" @btnClick='handleHelp'
			:boundary="{top: 200,left: 30,bottom: 240,right: 30}" :initLocation="{left: 620, top: 600 }">
			<view class="help-container">
				<text v-if="onlineConf.onlineStep == 2">{{formatSecondsToMinutesSeconds(onlineConf.tipsTime)}}</text>
				<text v-else>紧急\n救助</text>
			</view>
		</l-drag>
		<Popup :show.sync="popupShow" title="订单状态记录">
			<view class="p-lr16" style="margin-top:52rpx;max-height:70vh;overflow-y: auto;">
				<u-steps direction="column">
					<u-steps-item v-for="(item,index) in stepList" :key="index">
						<view slot="icon">
							<image :src="index<=activeStepList['length']?item.activeIcon:item.icon"
								class="width-20 height-20 shrink-0" mode=""></image>
						</view>
						<view slot="title">
							<view class="">
								<text class="f-w500 f-s15 line-height20 p-l10 ">{{item.step}}</text>
							</view>
						</view>
						<view slot="desc">
							<view class="m-t8 p-b25">
								<text class="f-w400 f-s12 text-gray line-height17 p-l10" v-if="activeStepList[index]">
									{{activeStepList[index]['desc']}}{{ activeTimeFormat(activeStepList[index])}}</text>
								<text class="f-w400 f-s12 text-gray line-height17 p-l10" v-else>{{item.waitText}}</text>
								<view class="p-l10 m-t2" v-if="activeStepList[index]">
									<image v-for="(image,imageIndex) in activeStepList[index]['report_image_list']"
										:key="image" :src="image" class="width-64 height-64 radius m-r2" mode=""
										@click="handlePreviewImage(activeStepList[index]['report_image_list'],imageIndex)">
									</image>
								</view>
							</view>

						</view>
					</u-steps-item>
				</u-steps>
			</view>
		</Popup>
		<u-popup :show="helpPopupShow" bgColor="transparent" mode="center">
			<view class="help-popup">
				<view class="flex flex-direction align-center">
					<text class="line-height-24 f-w600 f-s17">紧急救助</text>
					<image src="/static/images/order/help.png" class="width-58 height-58 m-t12" mode=""></image>
				</view>
				<view class="m-t18 text-gray line-height22 f-s12 f-w400">
					<text>当前您的实时位置</text>
				</view>
				<view class="flex p-10 m-t5" style="background: #F5F6F7;border-radius: 16rpx;">
					<image src="/static/images/login/location.png" class="width-20 height-20 shrink-0" mode=""></image>
					<view class="f-s14 f-w600 line-height22 m-l6">
						<text>{{positionInfo.province}}{{positionInfo.city}}{{positionInfo.district}}{{positionInfo.address}}</text>
					</view>
				</view>
				<view v-if="onlineConf.onlineStep == 2" @click="handleStopRecord" hover-class="pressed"
					class="m-t16 text-white f-w500 f-s14 flex justify-center align-center"
					style="height: 80rpx;background: #FE3F59;border-radius: 40rpx;">
					<text>正在录音({{formatSecondsToMinutesSeconds(onlineConf.tipsTime)}})，结束并发送录音</text>
				</view>
				<view v-else @click="handleSendHelp" hover-class="pressed"
					class="m-t16 text-white f-w500 f-s14 flex justify-center align-center"
					style="height: 80rpx;background: #FE3F59;border-radius: 40rpx;">
					<text>发送求助信息</text>
				</view>
				<view class="m-t10 text-theme f-w600 f-s12">
					<text>点击发送求助信息把地理位置发送至平台并开始录音</text>
				</view>
				<view class="help-popup-close" @click="helpPopupShow = false">
					<image src="/static/images/order/close-2.png" class="width-30 height-30" mode=""></image>
				</view>
			</view>
		</u-popup>
		<Toast></Toast>
	</view>
</template>

<script>
	import Popup from "@/components/popup/index.vue"
	import {
		detail,
		takeOrder,
		startService,
		setOut,
		orderSteps,
		reportDetail,
		callPolice
	} from "@/api/order"
	import {
		appConfig
	} from "@/api/document/index.js"
	import toMapAPP from "@/config/toMap.js"
	import {
		mapState
	} from 'vuex'
	import dayjs from "dayjs"
	import permision from "@/common/permission.js"
	export default {
		components: {
			Popup
		},
		data() {
			return {
				audio: '', // 录音文件
				recorderManager: null, // 录音管理器
				timer: null, // 录音时间戳
				onlineConf: {
					onlineStep: 1, // 1 开始录音 2录音中 3结束录音 4 播放录音
					isfinish: false, // 是否结束录音
					isRecord: false, // 是否正在录音
					tipsTime: 0, // 录音的时长
				},
				helpPopupShow: false,
				reportList: [],
				detailData: {},
				queryParams: {
					order_sn: ''
				},
				topBGC: 'rgba(255,255,255,0)',
				popupShow: false,
				isEvaluate: false,
				activeStepList: [], // 激活步骤数组
				stepList: [{
					value: 0,
					text: '搭搭准备出发',
					pass: false,
					step: '搭搭接单',
					waitText: '等待搭搭接单',
					icon: '/static/images/order/start.png',
					activeIcon: '/static/images/order/start-1.png'
				}, {
					value: 1,
					text: '搭搭已出发',
					pass: false,
					step: '搭搭出发',
					waitText: '等待搭搭出发',
					icon: '/static/images/order/depart.png',
					activeIcon: '/static/images/order/depart-1.png'
				}, {
					value: 2,
					text: '搭搭已到达',
					pass: false,
					step: '搭搭到达',
					waitText: '等待搭搭到达',
					icon: '/static/images/order/location.png',
					activeIcon: '/static/images/order/location-1.png'
				}, {
					value: 3,
					text: '搭搭服务中',
					pass: false,
					step: '搭搭服务',
					waitText: '等待搭搭服务完成',
					icon: '/static/images/order/like.png',
					activeIcon: '/static/images/order/like-1.png'
				}, {
					value: 4,
					text: '搭搭服务已完成',
					pass: false,
					step: '服务完成',
					waitText: '等待搭搭评价',
					icon: '/static/images/order/finish.png',
					activeIcon: '/static/images/order/finish-1.png'
				}],
				deductionFee: [],
				deductionFeeMap: {
					channel_money: '广告推广',
					order_brokerage: '个人推广',
					savings_money: '充值折扣优惠',
					poundage: '提现手续费',
					service_money: '增值服务费',
					discount: '活动折扣优惠'
				}
			}
		},
		onPageScroll(event) {
			let scrollTop = event.scrollTop
			// 计算透明度（0-1之间变化）
			// 这里设定当滚动超过100px时完全变为白色，你可以调整这个值
			let navbarOpacity = Math.min(scrollTop / 80, 1)
			this.topBGC = `rgba(255, 255, 255, ${navbarOpacity})`
		},
		computed: {
			currentStep() {
				const reversed = [...this.stepList].reverse();
				const found = reversed.find(item => item.pass === true);
				return found || {}
			},
			...mapState({
				positionInfo: state => state.user.position || {}
			})
		},
		onLoad(query) {
			this.queryParams.order_sn = query.id
			this.getDetail()
			this.getAppConfig()
		},
		onUnload() {
			uni.$off('getTo', this.handleGetToEmit())
			uni.$off('endService', this.handleEndServiceEmit())
		},
		watch: {
			'detailData.order_status': {
				deep: true,
				handler(val) {
					switch (val) {
						case 2:
							// 待接单
							this.$set(this.stepList[0], 'pass', true)
							break;
						case 8:
							// 已出发
							this.$set(this.stepList[1], 'pass', true)
							break;
						case 9:
							// 已到达
							this.$set(this.stepList[2], 'pass', true)
							break;
						case 3:
							// 正在服务
							this.$set(this.stepList[3], 'pass', true)
							break;
						case 4:
						case 5:
							// 服务完成
							this.$set(this.stepList[4], 'pass', true)
							break;
						default:
							break;
					}
				}
			}
		},
		methods: {
			checkBtnPlaceholder() {
				let status = true
				switch (this.detailData.order_status) {
					case 4:
					case 5:
						status = this.detailData.comment_user_data ? false : true;
						break;
					case 6:
					case 7:
						status = false
						break;
				}
				return status
			},
			// 秒钟格式化分：秒
			formatSecondsToMinutesSeconds(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = seconds % 60;

				// 补零，确保两位数
				const formattedMins = mins.toString().padStart(2, '0');
				const formattedSecs = secs.toString().padStart(2, '0');

				return `${formattedMins}:${formattedSecs}`;
			},
			handleStopRecord() {
				// 结束录音
				this.recorderManager.stop()
			},
			// 初始化录音组件
			initOnlibeRecord() {
				this.recorderManager = uni.getRecorderManager();
				let self = this;
				// 监听对象的stop事件
				this.recorderManager.onStop(async (res) => {
					self.onlineConf.onlineStep = 3
					this.resetInterval()
					let params = this.positionInfo
					this.$modal.loading("录音信息正在发送").then(() => {
						callPolice({
							...params,
							audio: res.tempFilePath
						}).then(res => {
							this.$toast("成功发送")
							this.$modal.closeLoading()
						}).catch(() => {
							this.$modal.closeLoading()
						})
					})
				});
				// 监对象的start事件
				this.recorderManager.onStart(function(res) {
					self.onlineConf.onlineStep = 2
					self.getOperateTime();
				});
			},
			// 重置计时
			resetInterval() {
				if (this.timer) {
					this.timer = null
					this.onlineConf.tipsTime = 0
				}
			},
			// 计时
			getOperateTime() {
				this.resetInterval()
				this.timer = setInterval(() => {
					this.onlineConf.tipsTime += 1;
				}, 1000);
			},
			// 开始录音
			async startRecord() {
				let status = await this.getRecordPermission();
				if (status === 1) {
					this.recorderManager.start({
						duration: 1000 * 60 * 5
					})
				}
			},
			// 校验录音权限
			async getRecordPermission() {
				let status = permision.isIOS ? await permision.requestIOS('record') :
					await permision.requestAndroid('android.permission.RECORD_AUDIO');
				if (status === null || status === 1) {
					status = 1;
				} else if (status === 2) {
					// 定位服务未启用
					this.$toast("录音服务未开启")
				} else {
					uni.showModal({
						title: "提示",
						content: '录音权限未开启，请前往设置打开授权',
						confirmText: '前往设置',
						success(res) {
							if (res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
				}
				return status
			},
			// 判断值是否为0
			isStrictZero(value) {
				// 排除 null、undefined、false、空字符串
				if (value === null || value === undefined || value === false || value === "") {
					return false;
				}
				return Number(value) !== 0;
			},
			// 发送救助信息
			handleSendHelp() {
				this.startRecord()
				let params = this.positionInfo
				this.$modal.loading("位置信息正在发送").then(() => {
					callPolice(params).then(res => {
						// this.helpPopupShow = false
						this.$toast("成功发送")
						this.$modal.closeLoading()
					}).catch(() => {
						this.$modal.closeLoading()
					})
				})

			},
			// 紧急求助按钮
			handleHelp() {
				// 创建录音管理器
				this.initOnlibeRecord()
				this.helpPopupShow = true
			},
			handleOpenMapApp() {
				let {
					lat: latitude,
					lng: longitude,
					address: name
				} = this.detailData
				toMapAPP(latitude, longitude, name)
			},
			// 报备列表
			getReportDetail() {
				reportDetail({
					order: this.queryParams.order_sn
				}).then(res => {
					let {
						data
					} = res
					this.reportList = data || []
				})

			},
			getAppConfig() {
				// 获取应用配置
				appConfig().then(res => {
					this.appConfig = res.data || {}
				}).catch(() => {
					this.appConfig = {}
				})
			},
			handleToInformoDetail(type) {
				if (type) {
					this.$tab.navigateTo('inform-detail?id=' + this.detailData.order_sn)
				} else {
					this.$toast('无报备记录')
				}
			},
			handlePreviewImage(list = [], index = 0) {
				uni.previewImage({
					urls: list,
					current: index
				})
			},
			activeTimeFormat(temp = {}) {
				if (!temp?.time) return
				return dayjs(temp.time * 1000).format("YYYY.MM.DD HH:mm")
			},
			formatTime(minutes) {
				if (minutes < 60) {
					// 如果未超过60分钟，直接显示分钟
					return `${minutes}分钟`;
				} else {
					// 如果超过60分钟，转换为 "时:分" 格式
					const hours = Math.floor(minutes / 60); // 计算小时
					const remainingMinutes = minutes % 60; // 计算剩余的分钟
					if (remainingMinutes == 0) {
						return `${hours}小时`;
					}
					return `${hours}小时${remainingMinutes}分钟`;
				}
			},
			// 完成评价事件监听
			handleEvaluateEmit(raw) {
				if (raw) {
					this.getDetail()
				}
			},
			// 评价
			handleToEvaluate() {
				uni.$on('evaluate', this.handleEvaluateEmit)
				this.$tab.navigateTo(
					`evaluate?id=${this.detailData.order_sn}&name=${this.detailData.username}&avatar=${this.detailData.avatar}`
				)
			},
			// 完成服务事件监听
			handleEndServiceEmit(raw) {
				if (raw) {
					this.getDetail()
				}
			},
			// 完成服务
			handleEndService() {
				uni.$on('endService', this.handleEndServiceEmit)
				this.handleToPath('end-service?id=' + this.detailData.order_sn)
			},
			// 到达事件监听
			handleGetToEmit(raw) {
				if (raw) {
					this.getDetail()
				}
			},
			// 到达
			handleGetTo() {
				uni.$on('getTo', this.handleGetToEmit)
				this.handleToPath('take-picture?id=' + this.detailData.order_sn)
			},
			// 出发
			handleSetOut(type = 1) {
				this.$modal.loading('正在获取当前位置').then(() => {
					uni.getLocation({
						type: 'gcj02',
						geocode: true,
						success: (res) => {
							let {
								address,
								latitude,
								longitude
							} = res;
							let {
								province,
								city,
								district,
								street,
								poiName
							} = address;
							let location = `${province}${city}${district}${street}${poiName}`
							setOut({
								order_sn: this.detailData.order_sn,
								status: type,
								address: location
							}).then(res => {
								this.getDetail()
								this.$modal.closeLoading()
							}).catch(() => this.$modal.closeLoading())
						},
						fail: () => {
							this.$modal.closeLoading()
							this.$toast('定位失败，请检查网络或定位权限')
						}
					});
				})
			},
			// 接单
			handleTakeOrder() {
				this.$modal.loading('正在接单').then(() => {
					takeOrder({
						order_sn: this.detailData.order_sn
					}).then(res => {
						this.$modal.closeLoading()
						this.$toast(res.msg)
						this.getDetail()
					}).catch(() => this.$modal.closeLoading())
				})

			},
			getDetail() {
				detail(this.queryParams).then(res => {
					let {
						data
					} = res
					this.detailData = data || {}
					orderSteps({
						order: this.detailData.order_sn
					}).then(steps => {
						this.activeStepList = steps.data || []
					})
					let filterList = Object.keys(this.deductionFeeMap)?.filter(key => this.isStrictZero(data[key]))
					this.deductionFee = filterList?.map(filterKey => {
						return `${this.deductionFeeMap[filterKey]}:￥${data[filterKey]}`
					})
					this.getReportDetail()
				})
			},
			handleCopy(content) {
				uni.setClipboardData({
					data: content,
					showToast: false,
					success: () => {
						this.$toast('已复制到剪切板')
					}
				});
			},
			handleMakePhone() {
				if (!this.detailData.middleNumber) {
					this.$toast('暂无可拨打号码')
					return
				}
				this.$modal.makePhone(this.detailData.middleNumber)
			},
			handleOpenPopup() {
				this.popupShow = true
			},
			handleToPath(path) {
				switch (path) {
					case 'take-picture':
						this.$tab.navigateTo('take-picture')
						break;
					case 'inform':
						this.$tab.navigateTo('inform?id=' + this.detailData.order_sn)
						break;
					case 'evaluate':
						this.$tab.navigateTo(
							`evaluate?id=${this.detailData.order_sn}&name=${this.detailData.username}&avatar=${this.detailData.avatar}`
						)
						break;
					case 'inform-detail':
						this.$tab.navigateTo('inform-detail')
						break;
					default:
						this.$tab.navigateTo(path)
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/css/var.scss';

	// page {
	// 	@include fixed-bottom;
	// }
	.btn-placeholder {
		@include fixed-bottom;
	}
</style>
<style scoped lang="scss">
	.container {
		padding: 16rpx 24rpx;

		.help-container {
			width: 100rpx;
			height: 100rpx;
			background: rgba(254, 63, 89, .8);
			box-shadow: 0px 4rpx 12rpx 0px #FE3F59;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			// font-weight: bold;
			touch-action: none;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.help-popup {
			width: 320px;
			background: #FFFFFF;
			border-radius: 10px;
			padding: 40rpx;
			position: relative;

			.help-popup-close {
				margin-top: 32rpx;
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.p-l2 {
			padding-left: 4rpx;
		}

		.p-l48 {
			padding-left: 96rpx;
		}

		.image-file-container {
			display: flex;
			overflow-x: auto;

			.image-file {
				width: 144rpx;
				height: 144rpx;
				margin-right: 10rpx;
				border-radius: 12rpx;
				flex-shrink: 0;
				// float:left;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.copy {
			background: #F0F1F2;
			border-radius: 4rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #585D66;
			height: 32rpx;
			line-height: 32rpx;
			padding: 0 6rpx;
			margin-right: 4rpx;
		}

		.eva-tag {
			margin-top: 24rpx;
			margin-bottom: 14rpx;
			display: flex;
			overflow-y: auto;

			.eva-tag-item {
				background: #F0F1F2;
				border-radius: 8rpx;
				padding: 8rpx 16rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #202020;
				line-height: 32rpx;
				margin-right: 10rpx;
			}
		}

		::v-deep .u-steps-item__line {
			height: 100% !important;
			background-color: #DDE0E6 !important;
		}

		::v-deep .u-steps-item__content {
			margin-top: 0 !important;
			margin-left: 0 !important;
		}
	}
</style>